{% extends "monitor/hbase_base.html" %}
{% load extended_filter %}

{% block hbase_content %}
    <div class="row">
        <div class="span12">
            <h3>QPS distribution on tables</h3>
        </div>
    </div>
    <div class="row">
        <div class="span6"> {{ read_requests_dist_by_table_chart }} </div>
        <div class="span6"> {{ write_requests_dist_by_table_chart }} </div>
    </div>
    <div class="row">
        <div class="span12"><h3>QPS Comparison</h3></div>
    </div>
    <div class="row">
        <div class = "span6">
            <a href="{{tsdb_url_prefix}}/#start={{start_date}}{{ tsdb_read_query|join:""}}&yrange=[0:]&key=out%20center%20top&wxh={{12|pic_width}}x{{tsdb_read_query|pic_heigth}}" >
                <img src="{{tsdb_url_prefix}}/q?start={{start_date}}{{ tsdb_read_query|join:""}}&yrange=[0:]&key=out%20center%20top&wxh={{6|pic_width}}x{{tsdb_read_query|pic_heigth}}&png" />
            </a>
        </div>
        <div class = "span6">
            <a href="{{tsdb_url_prefix}}/#start={{start_date}}{{ tsdb_write_query|join:""}}&yrange=[0:]&key=out%20center%20top&wxh={{12|pic_width}}x{{tsdb_write_query|pic_heigth}}" >
                <img src="{{tsdb_url_prefix}}/q?start={{start_date}}{{ tsdb_write_query|join:""}}&yrange=[0:]&key=out%20center%20top&wxh={{6|pic_width}}x{{tsdb_write_query|pic_heigth}}&png" />
            </a>
        </div>
    </div>
    <div class="row">
        <div class="span12"> 
            <h3>System Table</h3>
            <table class="table table-striped table-bordered">
                <thead>
                    <tr>
                        <th>table</th>
                        <th>memstore size(MB)</th>
                        <th>storefile size(MB)</th>
                        <th>read qps</th>
                        <th>write qps</th>
                        <th>Availability</th>
                    </tr>
                </thead>
                <tbody>
                    {% for table in system_tables %}
                    <tr>
                        <td><a href="/monitor/table/{{ table.id }}">{{ table.name }}</a></td>
                        <td>{{ table.memStoreSizeMB }}</td>
                        <td>{{ table.storefileSizeMB }}</td>
                        <td>{{ table.readRequestsCountPerSec }}</td>
                        <td>{{ table.writeRequestsCountPerSec }}</td>
                        <td>{% if table.availability >= 0.0 %}
                            {{ table.availability|floatformat:-2}} %
                        {% else %}
                        {% endif %}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    <div class="row">
        <div class="span12"> 
            <h3>User Table</h3>
            <table class="table table-striped table-bordered">
                <thead>
                    <tr>
                        <th>table</th>
                        <th>memstore size(MB)</th>
                        <th>storefile size(MB)</th>
                        <th>read qps</th>
                        <th>write qps</th>
                        <th>Availability</th>
                    </tr>
                </thead>
                <tbody>
                    {% for table in user_tables %}
                    <tr>
                        <td><a href="/monitor/table/{{ table.id }}">{{ table.name }}</a></td>
                        <td>{{ table.memStoreSizeMB }}</td>
                        <td>{{ table.storefileSizeMB }}</td>
                        <td>{{ table.readRequestsCountPerSec }}</td>
                        <td>{{ table.writeRequestsCountPerSec }}</td>
                        <td>{% if table.availability >= 0.0 %}
                            {{ table.availability|floatformat:-2}} %
                        {% else %}
                        {% endif %}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
{% endblock %}
